import { fireEvent, render, screen } from '@app-nextmesh/utils';
import '@testing-library/jest-dom';

import ValueField, { FormType } from './ValueField';

describe('ValueField', () => {
  test('render', async () => {
    render(
      <ValueField
        disabled={false}
        type='double'
        value={{ Value: 123.1 }}
        units={undefined}
        onChange={() => {}}
      />,
    );
    expect(screen.queryAllByRole('combobox').length).toEqual(0);
  });
  test('change', async () => {
    const onValueChange = (form: FormType) => {
      console.log(name, 'form', form);
    };
    render(
      <ValueField
        disabled={false}
        type='double'
        value={{ Value: 123.1 }}
        units={undefined}
        onChange={onValueChange}
      />,
    );
    const input: HTMLInputElement = await screen.findByDisplayValue('123.1');
    fireEvent.change(input, { target: { value: '12.65' } });
    expect(screen.getByDisplayValue('12.65')).toBeInTheDocument();
  });
  test('rerender', async () => {
    const onValueChange = (form: FormType) => {
      console.log('form', form);
    };
    const { rerender } = render(
      <ValueField
        disabled={false}
        type='double'
        value={{ Value: 123.1 }}
        units={undefined}
        onChange={onValueChange}
      />,
    );
    expect(screen.queryAllByRole('combobox').length).toEqual(0);
    rerender(
      <ValueField
        disabled={false}
        type='double'
        value={{ Value: 123.1, Unit: 'm' }}
        units={['cm', 'm']}
        onChange={onValueChange}
      />,
    );
    expect(screen.queryAllByRole('combobox').length).toEqual(1);
  });
});
